<template>
  <div class="app-container">
    <!-- 条件栏 -->
    <div class="filter-wrapper">
      <NewPageFilter
        v-model:query="filterInfo.query"
        :filter-list="filterInfo.list"
        :filter-btn="filterInfo.btn"
      >
        <template v-slot:filter-operateTime>
          <el-date-picker
            v-model="operateTime"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            type="datetimerange"
            range-separator="至"
            align="right"
            start-placeholder="操作时间开始日期"
            end-placeholder="操作时间结束日期"
            :clearable="false"
            @change="timeChange"
          ></el-date-picker>
        </template>
      </NewPageFilter>
    </div>
    <div class="filter-wrapper">
      <NewPageFilter :filter-btn="filterInfo.btnList">
        <!-- <template v-slot:filter-del>
          <el-button :disabled="!canDelete" @click="del()">删除</el-button>
        </template> -->
      </NewPageFilter>
    </div>
    <!-- 表格 -->
    <TableContainer
      :refresh="tableInfo.refresh"
      :init-curpage="tableInfo.initCurpage"
      v-model:data="tableInfo.data"
      :api="tableInfo.api"
      :query="filterInfo.query"
      :tab-index="true"
      :field-list="tableInfo.fieldList"
      :pager="true"
      :checkBox="false"
      :handle="tableInfo.handle"
      @handleEvent="handleEvent"
    >
      <template v-slot:col-fileName="scope">
        <span class="slip-edit" @click="showDetail(scope.row)">{{
          scope.row.fileName
        }}</span>
      </template>
    </TableContainer>
  </div>
</template>

<script setup name="collectionFile">
import { getCollectionList, removeCollection } from '@/api/fileManager'
import moment from 'moment'
const { proxy } = getCurrentInstance()
const router = useRouter()

const operateTime = ref([
  moment(new Date(new Date().getTime() - 3600 * 1000 * 24 * 30)).format(
    'YYYY-MM-DD'
  ),
  moment(new Date()).format('YYYY-MM-DD'),
])
// 过滤相关配置
const filterInfo = ref({
  query: {
    startDate: operateTime.value[0],
    endDate: operateTime.value[1],
  },
  copyQuery: {},
  list: [
    {
      componentType: 'input',
      label: '文档名称',
      value: 'keyword',
      event: search,
    },
    {
      slot: true,
      label: '起止日期',
      value: 'operateTime',
      event: search,
    },
  ],
  btn: [
    { type: 'button', label: '搜索', event: search },
    { type: 'button', label: '重置', event: clearSearch },
  ],
  btnList: [
    // {
    //   type: 'slot',
    //   value: 'del',
    //   show: proxy.$permission('collectionFile:del'),
    // },
  ],
})
// 表格相关
const tableInfo = ref({
  refresh: 1,
  initCurpage: 1,
  api: getCollectionList,
  data: [{}],
  selections: [],
  fieldList: [
    {
      label: '文档名称',
      value: 'fileName',
      type: 'slot',
    },
    { label: '文档目录', value: 'fileCategoryName' },
    { label: '收藏时间', value: 'collectTime' },
  ],
  handle: {
    fixed: 'right',
    label: '操作',
    width: '60',
    btList: [
      {
        label: '删除',
        event: del,
        popconfirmText: '删除后将改变数据,是否继续？',
        show: proxy.$permission('collectionFile:del'),
      },
    ],
  },
})
// const canDelete = computed(() => {
//   return tableInfo.value.selections.length
// })

onMounted(() => {
  filterInfo.value.copyQuery = proxy.$fn.deepClone(filterInfo.value.query)
})

// 搜索
function search() {
  // 重置分页
  tableInfo.value.initCurpage = Math.random()
  tableInfo.value.refresh = Math.random()
}
function clearSearch() {
  filterInfo.value.query = proxy.$fn.deepClone(filterInfo.value.copyQuery)
  operateTime.value = [
    filterInfo.value.query.startDate,
    filterInfo.value.query.endDate,
  ]
  search()
}
// 获取列表
function getList() {
  tableInfo.value.refresh = Math.random()
}
function timeChange(val) {
  if (val && val.length) {
    filterInfo.value.query.startDate = val[0]
    filterInfo.value.query.endDate = val[1]
  } else {
    filterInfo.value.query.startDate = ''
    filterInfo.value.query.endDate = ''
  }
  search()
}
// 触发事件
function handleEvent(event, data) {
  switch (event) {
    case 'tableCheck':
      tableInfo.value.selections = [...data]
      break
  }
}
//删除
function del(row = undefined) {
  const ids = _getIds(row)
  removeCollection(ids).then((resp) => {
    if (resp && resp.success) {
      getList()
    }
  })
}
function _getIds(row) {
  let ids = []
  if (row && row.id) {
    ids = [row.id]
  } else {
    if (tableInfo.value.selections.length > 0) {
      ids = tableInfo.value.selections.map((row) => row.id)
    }
  }
  return ids
}
function showDetail(obj) {
  if (obj.status === 'CANCEL') {
    proxy.$message.warning('文档已作废！')
    return
  }
  const id = obj.val ? obj.val.fileDetailId : obj.fileDetailId
  if (obj.allowPreview == 1) {
    router.push({
      path: '/fileManager/fileview/' + id,
      query: {
        active: '/fileManager/collection',
        view: 1,
      },
    })
  } else {
    proxy.$message.warning('您没有预览该文档权限，请联系管理员！')
  }
}
</script>
